<!DOCTYPE html>
<html>
<head>
    <title>Force vs. Time Graph</title>
</head>
<body>

<canvas id="physicsCanvas" width="360" height="420"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const margin = { top: 30, right: 30, bottom: 60, left: 70 };
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const plotWidth = canvasWidth - margin.left - margin.right;
    const plotHeight = canvasHeight - margin.top - margin.bottom;

    const tMax = 3; // Max time in ms
    const FMax = 10; // Max force in kN

    // Number of grid divisions
    const xGridDivs = 6;
    const yGridDivs = 10;

    // --- Coordinate Scaling Functions ---
    // Convert data coordinates (t, F) to canvas coordinates (x, y)
    function scaleX(t) {
        return margin.left + (t / tMax) * plotWidth;
    }

    function scaleY(F) {
        return margin.top + plotHeight - (F / FMax) * plotHeight;
    }

    // --- Drawing Functions ---

    // Draw the grid
    function drawGrid() {
        ctx.strokeStyle = 'lightgray';
        ctx.lineWidth = 1;

        // Vertical grid lines
        for (let i = 1; i <= xGridDivs; i++) {
            const t = (i / xGridDivs) * tMax;
            const x = scaleX(t);
            ctx.beginPath();
            ctx.moveTo(x, margin.top);
            ctx.lineTo(x, margin.top + plotHeight);
            ctx.stroke();
        }

        // Horizontal grid lines
        for (let i = 1; i <= yGridDivs; i++) {
            const F = (i / yGridDivs) * FMax;
            const y = scaleY(F);
            ctx.beginPath();
            ctx.moveTo(margin.left, y);
            ctx.lineTo(margin.left + plotWidth, y);
            ctx.stroke();
        }
    }

    // Draw the axes
    function drawAxes() {
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // X-axis
        ctx.beginPath();
        ctx.moveTo(margin.left, scaleY(0));
        ctx.lineTo(margin.left + plotWidth, scaleY(0));
        ctx.stroke();

        // Y-axis
        ctx.beginPath();
        ctx.moveTo(scaleX(0), margin.top);
        ctx.lineTo(scaleX(0), margin.top + plotHeight);
        ctx.stroke();
    }

    // Draw labels and ticks
    function drawLabels() {
        ctx.fillStyle = 'black';
        ctx.font = '20px Arial';

        // Y-axis labels
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('10', scaleX(0) - 8, scaleY(10));
        ctx.fillText('5', scaleX(0) - 8, scaleY(5));
        
        // X-axis labels
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('3', scaleX(3), scaleY(0) + 8);

        // Origin label
        ctx.textAlign = 'right';
        ctx.textBaseline = 'top';
        ctx.fillText('0', scaleX(0) - 5, scaleY(0) + 5);

        // Axis Titles
        ctx.font = 'bold 22px Arial';
        
        // Y-axis title
        ctx.save();
        ctx.translate(margin.left - 50, margin.top + plotHeight / 2);
        ctx.rotate(-Math.PI / 2);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('Force (kN)', 0, 0);
        ctx.restore();

        // X-axis title
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('Time (ms)', margin.left + plotWidth / 2, margin.top + plotHeight + 30);
    }

    // Draw the main graph data
    function drawGraph() {
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(scaleX(0), scaleY(0));
        ctx.lineTo(scaleX(1), scaleY(10));
        ctx.lineTo(scaleX(3), scaleY(0));
        ctx.stroke();
    }

    // --- Main Drawing Call ---
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    drawGrid();
    drawAxes();
    drawLabels();
    drawGraph();

</script>

</body>
</html>